// pages/category/index.js
// 引入发送请求的封装方法
import { request} from '../../request/index'
Page({
  data: {
     //左侧的菜单数据
     leftMenuList:[],
     //右侧商品数据
     rightContent:[],
     //被点击的左侧的菜单索引值
     currentIndex:0,
     //设置右侧内容的滚动条距离顶部的距离
     scrollTop:0,
  },
  //接口的返回数据
  Cates:[],

  //页面加载钩子
  onLoad: function (options) {
    /*
     1.先判断一下本地存储中没有旧的数据
       {tiem:Date.now(),date:[...]}  存储数据格式
     2.没有旧数据 直接发送新请求
     3.有旧的数据 同时 旧的数据也没有过期，就使用本地存储的旧数据
     */
    // 1.获取本地存储中的数据 （小程序中也是存在本地存储的）
    const Cates = wx.getStorageSync("cates");
    // 判断是否有有数据
    if (!Cates) {
      //  不存在  发送请求获取数据
      this.getCates();
    }else{
      //  有旧数据，且先判断时间是否已过期
      if (Date.now() - Cates.tiem > 1000 * 60 * 5) {
        //  时间已过期，重新发送请求
         this.getCates();
      }else{
        // 时间未过期，使用旧数据
        this.Cates = Cates.data;  
        //构造左侧的大菜单数据
        let leftMenuList = this.Cates.map( v=>v.cat_name );
        //构造右侧的商品数据
        let rightContent = this.Cates[0].children;
        this.setData({     //获取左侧的菜单数据
          leftMenuList,
          rightContent,
        })
      }
    }
  },

  //获取分类数据
  async getCates(){
    // request({
    //   url:"/categories"
    // })
    // .then( res => {
    //   console.log(res)
    //   this.Cates = res.data.message;
    //   //把接口返回的数据存入到本地存储中
    //   wx.setStorageSync("cates", {tiem: Date.now(),data:this.Cates});

    //   //构造左侧的大菜单数据
    //   let leftMenuList = this.Cates.map( v=>v.cat_name );
    //   //构造右侧的商品数据
    //   let rightContent = this.Cates[0].children;
    //   this.setData({     //获取左侧的菜单数据
    //     leftMenuList,
    //     rightContent,
    //   })
    // })
    const res = await request( {url:"/categories"});
    this.Cates = res;
      //把接口返回的数据存入到本地存储中
      wx.setStorageSync("cates", {tiem: Date.now(),data:this.Cates});

      //构造左侧的大菜单数据
      let leftMenuList = this.Cates.map( v=>v.cat_name );
      //构造右侧的商品数据
      let rightContent = this.Cates[0].children;
      this.setData({     //获取左侧的菜单数据
        leftMenuList,
        rightContent,
      })
  },

  //左侧菜单的点击事件
  handleItemTap(e){
    // console.log(e);
    /*1.获取被点击的标题身上的索引
      2.给data中的currentIndex赋值就可以了 
      3.根据不同的索引来渲染右侧的商品内容
      currentTarget：绑定事件的元素
    */
      const {index} = e.currentTarget.dataset;  //获取当前点击的菜单索引值
      let rightContent = this.Cates[index].children;  //获取当前的索引的右侧商品数据
      this.setData({
        currentIndex:index,  //把拿到值赋给被点击的左侧的菜单
        rightContent,
        //重新设置，右侧内容scroll-view标签距离顶部的距离
        scrollTop:0
      })
  }
})